<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>栏目管理</title>
    {sys:load href="admin/css/bootstrap.min.css,admin/css/materialdesignicons.min.css,admin/css/animate.css,admin/css/style.min.css,admin/js/bootstrap-table/bootstrap-table.min.css"}
</head>

<body>
<div class="container-fluid p-t-15">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header"><h4>栏目管理</h4></div>
                <div class="card-body">
                    <div id="toolbar2" class="toolbar-btn-action">
                        <button type="button" class="btn btn-primary m-r-5" onclick="openModel('新增栏目', '/app/cms/admin.column/save')"><span class="mdi mdi-plus" aria-hidden="true"></span>新增</button>
                        <button type="button" class="btn btn-primary m-r-5" onclick="loadSelf()"><span class="mdi mdi-rotate-3d" aria-hidden="true"></span>刷新</button>
                    </div>
                    <table class="tree-table"></table>
                </div>
            </div>
        </div>

    </div>
</div>

{sys:load href="admin/js/jquery.min.js,admin/js/bootstrap.min.js,admin/js/perfect-scrollbar.min.js,admin/js/bootstrap-table/bootstrap-table.js,admin/js/bootstrap-table/bootstrap-table-zh-CN.min.js,admin/lib/layui/layui.js,admin/common.js"}

<!--以下是tree-grid的使用-->
{sys:load href="admin/js/jquery-treegrid/jquery.treegrid.min.css,admin/js/jquery-treegrid/jquery.treegrid.min.js,admin/js/bootstrap-table/extensions/treegrid/bootstrap-table-treegrid.min.js"}

<script type="text/javascript">
    var $treeTable = $('.tree-table');
    $treeTable.bootstrapTable({
        url : '/app/cms/admin.column/datas?limit=500',
        idField: 'id',
        uniqueId: 'id',
        dataType: 'json',
        toolbar: '#toolbar2',
        columns: [
            {
                field: 'check',
                width: 100,
                checkbox: true
            },
            {
                field: 'title',
                width: 300,
                title: '栏目名称'
            },
            {
                field: 'id',
                width: 140,
                title: '调用ID'
            },
            {
                field: 'alias',
                width: 140,
                title: '访问别名'
            },
            {
                field: 'mode_string',
                width: 120,
                title: '类型'
            },
            {
                field: 'template',
                width: 140,
                title: '模板'
            },
            {
                field: 'sort',
                width: 100,
                title: '排序'
            },
            /*
            {
                field: 'status',
                title: '位置',
                width: 140,
                formatter: function (value, row, index) {
                    if (value == 0) {
                        is_checked = '';
                    } else if (value == 1){
                        is_checked = 'checked="checked"';
                    }
                    result = '<label class="lyear-switch switch-primary lyear-status"><input type="checkbox" '+ is_checked +'><span  onClick="updateStatus('+ row.id +', '+ value +')"></span></label>';
                    return result;
                },
            },*/
            {
                field: 'status_string',
                title: '位置',
                width: 100,
            },
            {
                field: 'operate',
                title: '操作',
                align: 'left',
                events : {
                    'click .role-manage': function (e, value, row, index) {
                        let manageUrl = '/app/cms/admin.'+row.mode+'/index?column_id='+row.id;
                        multitabs('管理' + row.title, manageUrl);
                    },
                    'click .role-delete': function (e, value, row, index) {
                        del(row.id);
                    },
                    'click .role-html': function (e, value, row, index) {
                        openModel('修改'+row.title, '/app/cms/admin.column/html?id='+row.id)
                    },
                    'click .role-edit': function (e, value, row, index) {
                        openModel('修改'+row.title, '/app/cms/admin.column/save?id='+row.id)
                    }
                },
                formatter: operateFormatter
            }
        ],
        treeShowField: 'title',
        parentIdField: 'pid',
        onResetView: function(data) {
            $treeTable.treegrid({
                initialState: 'collapsed', // 所有节点都折叠
                treeColumn: 1,
                //expanderExpandedClass: 'mdi mdi-folder-open',  // 可自定义图标样式
                //expanderCollapsedClass: 'mdi mdi-folder',
                onChange: function() {
                    $treeTable.bootstrapTable('resetWidth');
                }
            });

            // 只展开树形的第一集节点
            $treeTable.treegrid('getRootNodes').treegrid('expand');
        },
        onCheck: function(row) {
            var datas = $treeTable.bootstrapTable('getData');

            selectChilds(datas, row, 'id', 'pid', true); // 选择子类

            selectParentChecked(datas, row, 'id', 'pid'); // 选择父类

            $treeTable.bootstrapTable('load', datas);
        },

        onUncheck: function(row) {
            var datas = $treeTable.bootstrapTable('getData');
            selectChilds(datas, row, 'id', 'pid', false);
            $treeTable.bootstrapTable('load', datas);
        },
    });

    // 操作按钮
    function operateFormatter(value, row, index) {
        let operate = [
            '<a type="button" class="role-edit btn btn-xs btn-default m-r-5" title="修改" data-toggle="tooltip"><i class="mdi mdi-pencil"></i>修改</a>&nbsp;&nbsp;&nbsp;&nbsp;',
            '<a type="button" class="role-html btn btn-xs btn-default m-r-5" title="HTML" data-toggle="tooltip"><i class="mdi mdi-pencil"></i>HTML</a>&nbsp;&nbsp;&nbsp;&nbsp;',
            '<a type="button" class="role-manage btn btn-xs btn-default" title="管理" data-toggle="tooltip"><i class="mdi mdi-console-line"></i>管理</a>&nbsp;&nbsp;&nbsp;&nbsp;',
            '<a type="button" class="role-delete btn btn-xs btn-default" title="删除" data-toggle="tooltip"><i class="mdi mdi-delete"></i>删除</a>'
        ].join('');

        if (row.mode == 'pages') {
            operate = [
                '<a type="button" class="role-edit btn btn-xs btn-default m-r-5" title="修改" data-toggle="tooltip"><i class="mdi mdi-pencil"></i>修改</a>&nbsp;&nbsp;&nbsp;&nbsp;',
                '<a type="button" class="role-html btn btn-xs btn-default m-r-5" title="HTML" data-toggle="tooltip"><i class="mdi mdi-pencil"></i>HTML</a>&nbsp;&nbsp;&nbsp;&nbsp;',
                '<a type="button" class="role-delete btn btn-xs btn-default" title="删除" data-toggle="tooltip"><i class="mdi mdi-delete"></i>删除</a>'
            ].join('');
        }

        return operate;
    }

    /**
     * 选中父项时，同时选中子项
     * @param datas 所有的数据
     * @param row 当前数据
     * @param id id 字段名
     * @param pid 父id字段名
     */
    function selectChilds(datas,row,id,pid,checked) {
        for(var i in datas){
            if(datas[i][pid] == row[id]){
                datas[i].check=checked;
                selectChilds(datas,datas[i],id,pid,checked);
            };
        }
    }

    function selectParentChecked(datas,row,id,pid){
        for(var i in datas){
            if(datas[i][id] == row[pid]){
                datas[i].check=true;
                selectParentChecked(datas,datas[i],id,pid);
            };
        }
    }

    function del(id) {
        layui.use(['Request', 'layer'], function(){
            let Request = layui.Request,layer = layui.layer;
            Request.get('/app/cms/admin.column/delete', {id: id}, function(response){
                layer.msg('成功删除', {time: 2000}, function(){
                    window.location.reload();
                })
            })
        })
    }

    function updateStatus(id, state) {
        var newstate = (state == 1) ? 0 : 1; // 发送参数值跟当前参数值相反
        $.ajax({
            type: "get",
            url: "/app/cms/column/save/act/updatestatus",
            data: {id: id, status: newstate},
            dataType: 'json',
            success: function (data, status) {
                if (data.state == 'success') {
                    $treeTable.bootstrapTable('updateCellById', {id: id, field: 'status', value: newstate});
                } else {
                    alert(data.message);
                    $treeTable.bootstrapTable('updateCellById', {id: id, field: 'status', value: state}); // 因开关点击后样式是变的，失败也重置下
                }
            },
            error: function () {
                alert('修改失败，请稍后再试');
            }
        });
    }

    function test() {
        var selRows = $treeTable.bootstrapTable("getSelections");
        if(selRows.length == 0){
            alert("请至少选择一行");
            return;
        }
        console.log(selRows);

        var postData = "";
        $.each(selRows,function(i) {
            postData +=  this.id;
            if (i < selRows.length - 1) {
                postData += "， ";
            }
        });
        alert("你选中行的 id 为："+postData);
    }
</script>
</body>
</html>
